<template>
  <div :class="['navbar', { 'collapsed': isSidebarCollapsed }]">
    <div class="sidebar-header">
      <button @click="goBack" class="back-button-in-sidebar">返回上一页</button>
      <button @click="toggleSidebar" class="toggle-btn">
        {{ isSidebarCollapsed ? '>' : '<' }} </button>
    </div>

    <!-- 导航栏内容 -->
    <div class="nav-group">
      <span class="nav-title">选择网络协议</span>
      <div class="nav-items">
        <!-- 传输层 -->
        <div class="nav-item">
          <span class="layer">传输层</span>
          <button @click="goToPage('tcp')">TCP</button>
          <button @click="goToPage('udp')">UDP</button>
        </div>
        <!-- 网络层 -->
        <div class="nav-item">
          <span class="layer">网络层</span>
          <button @click="goToPage('ip')">IP</button>
          <button @click="goToPage('arp')">ARP</button>
        </div>
        <!-- 网络接入层 -->
        <div class="nav-item">
          <span class="layer">网络接入层</span>
          <button @click="goToPage('mac')">MAC</button>
        </div>
      </div>
    </div>
  </div>
  <div class='main-container'>
    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
//添加路由
import { useRouter } from 'vue-router'

const router = useRouter()
const isSidebarCollapsed = ref(false)

function toggleSidebar() {
  isSidebarCollapsed.value = !isSidebarCollapsed.value
}

function goBack() {
  router.push({ name: 'Home' });
}

// 协议选择处理函数
function goToPage(protocol: string) {
  router.push({ name: protocol });
  // 可在此处添加协议选择后的逻辑，如跳转、配置等
}
</script>

<style scoped>
.back-button {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: green;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.navbar {
  position: fixed;
  /* 固定定位 */
  left: 0;
  /* 紧贴左侧 */
  top: 0;
  /* 顶部对齐 */
  width: 250px;
  /* 侧边栏宽度（可调整） */
  height: 100vh;
  /* 全屏高度 */
  padding: 20px 15px;
  /* 微调内边距 */
  background-color: #f8f9fa;
  /* 浅色背景 */
  border-right: 1px solid #e0e0e0;
  /* 右侧分割线 */
  overflow-y: auto;
  /* 内容过长时可滚动 */
  z-index: 3;
  /* 确保层级高于其他元素 */
  transition: width 0.3s ease;
  overflow-x: hidden;
}

.navbar.collapsed {
  width: 60px;
  /* 收起后的宽度 */
}

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  position: relative;
  width: 100%;
  /* 添加分号 */
  height: 40px;
  /* 明确设置高度，便于垂直居中计算 */
}

.toggle-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001;
  width: 24px;
  /* 固定宽度，保持收起状态时按钮大小一致 */
  height: 24px;
  /* 固定高度 */
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #6c757d;
  border-radius: 4px;
  color: white;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

/* 收起状态下隐藏文字 */
.navbar.collapsed .nav-title,
.navbar.collapsed .layer,
.navbar.collapsed button:not(.toggle-btn) {
  display: none;
}

/* 收起状态下只显示图标（需要添加图标库或使用伪元素） */
.navbar.collapsed .nav-item {
  display: flex;
  justify-content: center;
}

.navbar.collapsed .toggle-btn {
  right: 18px;
  /* 调整收起状态下的右边距 */
}

.nav-group .nav-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  display: block;
}

.nav-item {
  margin: 10px 0;
}

.layer {
  font-weight: bold;
  color: #005a9e;
  margin-right: 10px;
}

button {
  width: 100%;
  /* 按钮宽度占满侧边栏 */
  margin: 5px 0;
  /* 减少按钮垂直间距 */
  justify-content: flex-start;
  /* 左对齐文字 */
}

.back-button-in-sidebar {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  background-color: green;
  /* 灰色背景 */
}

button:hover {
  background-color: #0056b3;
}
</style>